html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}
body {
    background: rgb(212,212,212); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(212,212,212,1) 0%, rgba(152,154,164,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(212,212,212,1)), color-stop(100%,rgba(152,154,164,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(212,212,212,1) 0%,rgba(152,154,164,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(212,212,212,1) 0%,rgba(152,154,164,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(212,212,212,1) 0%,rgba(152,154,164,1) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(212,212,212,1) 0%,rgba(152,154,164,1) 100%); /* W3C */
    
    font-family: 'Viga', sans-serif;
    overflow: hidden;
}

#titletext {
    position: absolute;
    top: 33%;
    color: #ccc;
    left: 0%;
    text-align: center;
    font-size: 46px;
    width: 100%;
    text-shadow: 1px 1px 1px #888;
}

#spinner {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -64px;
    margin-top: -64px;
}

#canvas {    
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    /*background-image: url("../images/redcar.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;*/
}

section {
    display: none;
    /*
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    */
}

.button {
    display: inline-block;
    margin: 10px;
    padding: 15px;
    border: 1px solid rgba(254,180,28,0.5);
    
    background-image: linear-gradient(bottom, rgba(54,63,69, 0.65) 29%, rgba(75,95,109, 0.65) 71%, rgba(75,95,109,0.65) 86%);
    background-image: -o-linear-gradient(bottom, rgba(54,63,69, 0.65) 29%, rgba(75,95,109, 0.65) 71%, rgba(75,95,109,0.65) 86%);
    background-image: -moz-linear-gradient(bottom, rgba(54,63,69, 0.65) 29%, rgba(75,95,109, 0.65) 71%, rgba(75,95,109,0.65) 86%);
    background-image: -webkit-linear-gradient(bottom, rgba(54,63,69, 0.65) 29%, rgba(75,95,109, 0.65) 71%, rgba(75,95,109,0.65) 86%);
    background-image: -ms-linear-gradient(bottom, rgba(54,63,69, 0.65) 29%, rgba(75,95,109, 0.65) 71%, rgba(75,95,109,0.65) 86%);

    background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.29, rgba(54,63,69,0.65)),
            color-stop(0.71, rgba(75,95,109,0.65)),
            color-stop(0.656, rgba(75,95,109,0.65))
    );
    
    border-radius: 10px;
    color: white;
    font-size: 25px;
    cursor: pointer;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
    text-shadow: 0px 0px 3px rgba(255,255,255,0.6);
    
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.button:active {
    border: 1px solid rgba(255,255,255,0.6);
}

.button.active, .button.active:hover {
    background-image: -linear-gradient(bottom, rgb(89,113,130) 29%, rgb(112,132,143) 71%);
    background-image: -o-linear-gradient(bottom, rgb(89,113,130) 29%, rgb(112,132,143) 71%);
    background-image: -moz-linear-gradient(bottom, rgb(89,113,130) 29%, rgb(112,132,143) 71%);
    background-image: -webkit-linear-gradient(bottom, rgb(89,113,130) 29%, rgb(112,132,143) 71%);
    background-image: -ms-linear-gradient(bottom, rgb(89,113,130) 29%, rgb(112,132,143) 71%);

    background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.29, rgb(89,113,130)),
            color-stop(0.71, rgb(112,132,143))
    );
}

.button:hover, .button.dialog:hover {
    background-image: linear-gradient(bottom, rgb(54,63,69) 29%, rgb(75,95,109) 71%, rgb(75,95,109) 86%);
    background-image: -o-linear-gradient(bottom, rgb(54,63,69) 29%, rgb(75,95,109) 71%, rgb(75,95,109) 86%);
    background-image: -moz-linear-gradient(bottom, rgb(54,63,69) 29%, rgb(75,95,109) 71%, rgb(75,95,109) 86%);
    background-image: -webkit-linear-gradient(bottom, rgb(54,63,69) 29%, rgb(75,95,109) 71%, rgb(75,95,109) 86%);
    background-image: -ms-linear-gradient(bottom, rgb(54,63,69) 29%, rgb(75,95,109) 71%, rgb(75,95,109) 86%);

    background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.29, rgb(54,63,69)),
            olor-stop(0.71, rgb(75,95,109)),
            color-stop(0.86, rgb(75,95,109))
    );
}

.button.dialog {
    background-image: linear-gradient(bottom, rgb(54,63,69) 29%, rgb(75,95,109) 71%, rgb(75,95,109) 86%);
    background-image: -o-linear-gradient(bottom, rgb(54,63,69) 29%, rgb(75,95,109) 71%, rgb(75,95,109) 86%);
    background-image: -moz-linear-gradient(bottom, rgb(54,63,69) 29%, rgb(75,95,109) 71%, rgb(75,95,109) 86%);
    background-image: -webkit-linear-gradient(bottom, rgb(54,63,69) 29%, rgb(75,95,109) 71%, rgb(75,95,109) 86%);
    background-image: -ms-linear-gradient(bottom, rgb(54,63,69) 29%, rgb(75,95,109) 71%, rgb(75,95,109) 86%);

    background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.29, rgb(54,63,69)),
            olor-stop(0.71, rgb(75,95,109)),
            color-stop(0.86, rgb(75,95,109))
    );
    
    /*
    background-image: linear-gradient(bottom, rgba(54,63,69, 0.4) 29%, rgba(75,95,109, 0.4) 71%, rgba(75,95,109,0.4) 86%);
    background-image: -o-linear-gradient(bottom, rgba(54,63,69, 0.4) 29%, rgba(75,95,109, 0.4) 71%, rgba(75,95,109,0.4) 86%);
    background-image: -moz-linear-gradient(bottom, rgba(54,63,69, 0.4) 29%, rgba(75,95,109, 0.4) 71%, rgba(75,95,109,0.4) 86%);
    background-image: -webkit-linear-gradient(bottom, rgba(54,63,69, 0.4) 29%, rgba(75,95,109, 0.4) 71%, rgba(75,95,109,0.4) 86%);
    background-image: -ms-linear-gradient(bottom, rgba(54,63,69, 0.4) 29%, rgba(75,95,109, 0.4) 71%, rgba(75,95,109,0.4) 86%);

    background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.29, rgba(54,63,69,0.4)),
            color-stop(0.71, rgba(75,95,109,0.4)),
            color-stop(0.46, rgba(75,95,109,0.4))
    );
    */
    
    position: absolute;
    left: 50%;
    top: 0px;
    margin-left: -250px;
    width: 500px;
    z-index: 1000;
    padding: 20px;
    
    margin-top: 0px;
    border-top: 0px;
    border-radius: 0px;
    cursor: auto;
}

.button.dialog:active {
    border: 1px solid rgba(254,180,28,0.5);
    border-top: 0px;
}

.hidedialog.button {
    width: 530px;
    position: absolute;
    bottom: -47px;
    padding: 5px;
    margin: 0px;
    left: -1px;
    text-align: center;
    border-radius: 0px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.button.dialog h1 {
    margin: 0.2em;
    font-size: 26px;
}


.button.green {
    background-image: linear-gradient(bottom, rgba(62,112,33,0.6) 0%, rgba(118,209,57,0.6) 100%);
    background-image: -o-linear-gradient(bottom, rgba(62,112,33,0.6) 0%, rgba(118,209,57,0.6) 100%);
    background-image: -moz-linear-gradient(bottom, rgba(62,112,33,0.6) 0%, rgba(118,209,57,0.6) 100%);
    background-image: -webkit-linear-gradient(bottom, rgba(62,112,33,0.6) 0%, rgba(118,209,57,0.6) 100%);
    background-image: -ms-linear-gradient(bottom, rgba(62,112,33,0.6) 0%, rgba(118,209,57,0.6) 100%);

    background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0, rgba(62,112,33,0.6)),
            color-stop(1, rgba(118,209,57,0.6))
    );
}

.button.green:hover {
    background-image: linear-gradient(bottom, rgb(62,112,33) 0%, rgb(118,209,57) 100%);
    background-image: -o-linear-gradient(bottom, rgb(62,112,33) 0%, rgb(118,209,57) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(62,112,33) 0%, rgb(118,209,57) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(62,112,33) 0%, rgb(118,209,57) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(62,112,33) 0%, rgb(118,209,57) 100%);

    background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0, rgb(62,112,33)),
            color-stop(1, rgb(118,209,57))
    );
}


.button.red {
    background-image: linear-gradient(bottom, rgba(110,33,33, 0.4) 0%, rgba(207,58,58, 0.4) 100%);
    background-image: -o-linear-gradient(bottom, rgba(110,33,33, 0.4) 0%, rgba(207,58,58, 0.4) 100%);
    background-image: -moz-linear-gradient(bottom, rgba(110,33,33, 0.4) 0%, rgba(207,58,58, 0.4) 100%);
    background-image: -webkit-linear-gradient(bottom, rgba(110,33,33, 0.4) 0%, rgba(207,58,58, 0.4) 100%);
    background-image: -ms-linear-gradient(bottom, rgba(110,33,33, 0.4) 0%, rgba(207,58,58, 0.4) 100%);

    background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0, rgba(110,33,33, 0.4)),
            color-stop(1, rgba(207,58,58, 0.4))
    );
}

.button.red:hover {
    background-image: linear-gradient(bottom, rgb(110,33,33) 0%, rgb(207,58,58) 100%);
    background-image: -o-linear-gradient(bottom, rgb(110,33,33) 0%, rgb(207,58,58) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(110,33,33) 0%, rgb(207,58,58) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(110,33,33) 0%, rgb(207,58,58) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(110,33,33) 0%, rgb(207,58,58) 100%);

    background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0, rgb(110,33,33)),
            color-stop(1, rgb(207,58,58))
    );
}

#filemenubutton {
    position: relative;
    top: -58px;
    margin: 0;
    border-radius: 0px;
    border-top-right-radius: 10px;
    padding-bottom: 5px;
    border-bottom: 0px;
    border-left: 0px;
    box-shadow: 4px -4px 10px rgba(0,0,0,0.3);
    
}

footer {
    position: absolute;
    bottom: -310px;
    height: 300px;
    width: 100%;
    
    border-top: 2px solid rgba(254,180,28,0.5);
    
    background-image: linear-gradient(bottom, rgba(54,63,69, 0.8) 29%, rgba(75,95,109, 0.8) 71%, rgba(75,95,109,0.8) 86%);
    background-image: -o-linear-gradient(bottom, rgba(54,63,69, 0.8) 29%, rgba(75,95,109, 0.8) 71%, rgba(75,95,109,0.8) 86%);
    background-image: -moz-linear-gradient(bottom, rgba(54,63,69, 0.8) 29%, rgba(75,95,109, 0.8) 71%, rgba(75,95,109,0.8) 86%);
    background-image: -webkit-linear-gradient(bottom, rgba(54,63,69, 0.8) 29%, rgba(75,95,109, 0.8) 71%, rgba(75,95,109,0.8) 86%);
    background-image: -ms-linear-gradient(bottom, rgba(54,63,69, 0.8) 29%, rgba(75,95,109, 0.8) 71%, rgba(75,95,109,0.8) 86%);

    background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.29, rgba(54,63,69,0.8)),
            color-stop(0.71, rgba(75,95,109,0.8)),
            color-stop(0.86, rgba(75,95,109,0.8))
    );
    
    box-shadow: 4px -4px 10px rgba(0,0,0,0.3);
}

#imagelistwrapper {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: absolute;
    top: 10px;
    left: 10px;
}

#imagelist {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 6000px;
}

#imagelist span {
    display: block;
    float: left;
    border-radius: 4px;
    height: 270px;
    margin: 3px 10px 3px 3px;
    /*border: 3px solid rgba(255,255,255,0.4);*/
    cursor: pointer;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
}

#imagelist span:hover {
    box-shadow: 4px 4px 10px rgba(0,0,0,0.5), inset 0px 0px 20px rgba(255,255,255,0.6);
}

#imagelist span:active {
    box-shadow: 4px 4px 5px rgba(255,255,255,0.3);
}

#previmages {
    position: absolute;
    left: 0px;
    bottom: 0px;
    margin: 0px;
    border-bottom: 0px;
    border-left: 0px;
    border-radius: 0px;
    border-top-right-radius: 10px;
}

#nextimages {
    position: absolute;
    right: 0px;
    bottom: 0px;
    margin: 0px;
    border-bottom: 0px;
    border-right: 0px;
    border-radius: 0px;
    border-top-left-radius: 10px;
}

#modeselectorbuttons {
    position: absolute;
    top: 0px;
    left: 0px;
}

#modeselector .button {
    display: block;
    float: left;
}

#modeselector .button ul {
    display: none;
}

.button ul {
    margin: 20px 0px 0px 0px;
    padding: 0;
    list-style-type: none;
}

.button ul li {
    padding: 5px;
    border-radius: 4px;
    cursor: pointer;
}

.button ul li:hover {
    background-color: rgba(254,180,28,0.4);
}

.slider {
    margin: 20px 20px;
}

#maskbuttons {
    position: absolute;
    top: 140px;
    left: 10px;
    width: 80px;
}

#maskbuttons .button {
    text-align: center;
    width: 80px;
}

#brushsettings {
    display: none;
    position: absolute;
    left: 150px;
    top: 40px;
    width: 300px;
}

#brushpreview {
    display: none;
    position: absolute;
    width: 160px;
    height: 160px;
    top: -30px;
    
    background-image: linear-gradient(bottom, rgb(54,63,69) 29%, rgb(75,95,109) 71%, rgb(75,95,109) 86%) !important;
    background-image: -o-linear-gradient(bottom, rgb(54,63,69) 29%, rgb(75,95,109) 71%, rgb(75,95,109) 86%) !important;
    background-image: -moz-linear-gradient(bottom, rgb(54,63,69) 29%, rgb(75,95,109) 71%, rgb(75,95,109) 86%) !important;
    background-image: -webkit-linear-gradient(bottom, rgb(54,63,69) 29%, rgb(75,95,109) 71%, rgb(75,95,109) 86%) !important;
    background-image: -ms-linear-gradient(bottom, rgb(54,63,69) 29%, rgb(75,95,109) 71%, rgb(75,95,109) 86%) !important;

    background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.29, rgb(54,63,69)),
            olor-stop(0.71, rgb(75,95,109)),
            color-stop(0.86, rgb(75,95,109))
    ) !important;
}

#cropselectionbuttons {
    position: absolute;
    top: 0px;
    left: 0px;
}

#thebrush {
    pointer-events: none;
    display: none;
    position: absolute;
}